<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Rounded Corners + Liquid + Images</title>

<style type="text/css">
#liquid-round {
    width: 70%;
    margin: 0px auto;
    background: url(leftside.gif) repeat-y left top transparent; /* left border */
}

.top {
    background: url(top.gif) no-repeat left top; /* top left corner + top border */
    height: 20px; /* same as background image height */
}

.top span {
    display: block;
    background: url(top-right.gif) no-repeat right top; /* top right corner */
    height: 20px; /* same as background image height */
}

.center-content {
    background: url(rightside.gif) repeat-y right top; /* right border */
    padding: 1px 20px;
    position: relative; /* To ensure that the content stays on top as IE will often draw negative margin portions underneath anything else rather than on top. */
    margin-bottom: -30px; /* bottom background is too height, so adjust content */
}

.bottom {
    background: url(bottom.gif) no-repeat left bottom; /* bottom left corner + bottom border */
    height: 60px; /* same as background image height */
}

.bottom span {
    display: block;
    background: url(bottom-right.gif) no-repeat right top; /* bottom right corner */
    height: 60px; /* same as background image height */
}
</style>
</head>
<body>
  <div id="liquid-round">
    <div class="top"><span></span></div>
    <div class="center-content">
      <!-- CONTENT BEGIN -->
      <div>this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text</div>
      <div>this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text</div>
      <!-- CONTENT END -->
    </div>
    <div class="bottom"><span></span></div>
  </div>
</body>
</html>
